<template>
  <div class="enterprise-control">
    <div class="title-wrap">
      <RouteHeadLine />
      <div class="search-wrap" v-if="showStatus == 0">
        <el-form ref="formRef" :model="params">
          <el-row :gutter="20">
            <el-col :span="5.5">
              <el-form-item label="等级：">
                <el-select
                  v-model="params.colorlevel"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in urgencyLevel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="110px" label="组名称："
                ><el-input v-model="params.groupname" clearable></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="等级：">
                <el-select v-model="params.a" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="getList"
                  ><el-icon style="color: #fff; margin-right: 5px"
                    ><Search /></el-icon
                  >查询</el-button
                >
                <el-button
                  type="danger"
                  style="margin-left: 24px"
                  @click="handleDelete"
                  ><el-icon style="color: #fff; margin-right: 5px"
                    ><Delete /></el-icon
                  >删除</el-button
                >
                <el-button
                  class="add"
                  style="margin-left: 24px"
                  @click="handlerAdd"
                  ><el-icon
                    style="color: #fff; margin-right: 5px; font-size: 20px"
                    ><DocumentAdd /></el-icon
                  >新增</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <button class="back" @click="handerBtn" v-if="showStatus != 0">
      <img src="@/assets/images/wasteenterprise/back-icon.png" alt="" />
      返回
    </button>
    <!-- 企业详情 -->
    <div class="enterprise-detail" v-if="showStatus == 1">
      <div class="main-wrap">
        <div class="title-name">
          <div class="line"></div>
          企业详情
        </div>
        <div class="detail-wrap">
          <div class="line">
            <div class="left">企业名称：河南全会有限公司</div>
            <div class="right">排污许可证号：123404267093068</div>
          </div>
          <div class="line">
            <div class="left">区域：河南省郑州市高新区瑞达路</div>
            <div class="right">详细地址：河南省郑州市高新区瑞达路</div>
          </div>
          <div class="line">
            <div class="left">管辖地：郑州高新区环保局</div>
            <div class="right">企业类型：--</div>
          </div>
          <div class="line">
            <div class="left">年产废规模：10-100吨</div>
            <div class="right">环保管理员1：李梦</div>
          </div>
          <div class="line">
            <div class="left">手机号1：11057636907</div>
            <div class="right">环保管理员2：李强</div>
          </div>
          <div class="line">
            <div class="left">手机号2：11057636907</div>
            <div class="right">排污许可证二维码：</div>
          </div>
          <div class="line">
            <div class="left"></div>
            <div class="right"><img src="" alt="" /></div>
          </div>
        </div>
      </div>
      <div class="edit">
        <el-button class="btn-edit">
          <el-icon style="color: #fff; margin-right: 7px"><EditPen /></el-icon
          >编辑</el-button
        >
      </div>
    </div>
    <!-- 企业设施 -->
    <div class="enterprise-facility" v-if="showStatus == 2 && facilityListFlag">
      <div class="main-wrap">
        <div class="title-name">
          <div class="line"></div>
          企业设施
        </div>
      </div>
      <div class="enterprise-facility-title">
        <el-form :model="facilityParams">
          <el-row>
            <el-col :span="6">
              <el-form-item label="设施名称："
                ><el-input v-model="facilityParams.b" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="&nbsp;&nbsp;&nbsp;状态：">
                <el-select v-model="params.a" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="涉废类型：">
                <el-select v-model="params.a" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button
                type="primary"
                style="margin-left: 20px"
                @click="getList"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Search /></el-icon
                >查询</el-button
              >
              <el-button
                type="danger"
                style="margin-left: 24px"
                @click="handleDelete"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Delete /></el-icon
                >删除</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table-wrap data-wrap">
        <el-table
          :data="facilityList"
          border
          class="table-height"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" />
          <el-table-column prop="date" align="center" label="设施名称" />
          <el-table-column prop="name" align="center" label="设施编号" />
          <el-table-column prop="name" align="center" label="联系人" />
          <el-table-column prop="name" align="center" label="联系方式" />
          <el-table-column prop="name" align="center" label="安装位置" />
          <el-table-column prop="name" align="center" label="状态" />

          <el-table-column label="操作" width="260" align="center">
            <template #default="{ row }">
              <div class="btn-wrap">
                <button class="change-btn" @click="changeDetail">更换</button>
                <button class="record-btn" @click="handerRecord">记录</button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding-right: 60px; margin-top: 20px">
          <Pagination
            v-model:currentPage="pagiFacilityParams.currentPage"
            :total="pagiFacilityTotal"
            v-model:page-size="pagiFacilityParams.pageSize"
            @getDataList="getList"
          />
        </div>
      </div>
    </div>
    <!-- 企业详情 -->
    <div class="enterprise-detail" v-if="showStatus == 2 && !facilityListFlag">
      <div class="main-wrap">
        <div class="title-name">
          <div class="line"></div>
          企业设施
        </div>
        <div class="detail-wrap">
          <div class="line">
            <div class="left">二维码编号：23035821</div>
            <div class="right">设施名称：产污设施</div>
          </div>
          <div class="line">
            <div class="left">涉废类型：活性炭</div>
            <div class="right">处理设计风量（m³/h)：测试风量</div>
          </div>
          <div class="line">
            <div class="left">设计使用量(kg)：测试12</div>
            <div class="right">更换周期：30天</div>
          </div>
          <div class="line">
            <div class="left">环保管理员1：李强</div>
            <div class="right">手机号1：199368503985</div>
          </div>
          <div class="line">
            <div class="left">环保管理员2：李梦</div>
            <div class="right">手机号217889257</div>
          </div>

          <div class="line">
            <div class="left"><img src="" alt="" /></div>
            <div class="right"></div>
          </div>
        </div>
      </div>

      <div class="edit">
        <el-button class="btn-edit" @click="editChangeDetailMsg">
          <el-icon style="color: #fff; margin-right: 7px"><EditPen /></el-icon
          >编辑</el-button
        >
        <el-button class="close-btn">
          <el-icon style="color: #fff; margin-right: 7px"
            ><CircleClose /></el-icon
          >停用</el-button
        >
      </div>
    </div>
    <!-- 表格 -->
    <div class="data-wrap" v-if="showStatus == 0">
      <el-table
        :data="tableData"
        border
        class="table-height"
        @selection-change="toggleRowSelection"
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="60" />
        <el-table-column prop="id" align="center" label="ID" />
        <el-table-column prop="groupname" align="center" label="组名称" />
        <el-table-column
          prop="colorlevel"
          align="center"
          label="等级"
          width="170"
        >
          <template #default="{ row }">
            <div>
              {{
                urgencyLevel.find((item) => item.value == row.colorlevel)?.label
              }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="name" align="center" label="等级" /> -->
        <el-table-column prop="remark" align="center" label="备注" />
        <el-table-column prop="name" align="center" label="操作" width="260">
          <template #default="{ row }">
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <button class="table-edit" @click="editMsg(row)">编辑</button>
              <button class="table-set" @click="searchEnterprise(row.id)">
                设置企业
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-right: 60px; margin-top: 25px">
        <Pagination
          v-model:currentPage="params.page"
          :total="total"
          v-model:page-size="params.pagesize"
          @getDataList="getList"
        />
      </div>
    </div>

    <SearchDetail
      v-model:showDialog="showEnterpriseDetail"
      @save="editChangeDetailSave"
      :groupId="groupId"
    />
    <!-- 添加弹框 -->
    <AddData
      v-model:showDialog="showAddFlag"
      :addOrEditFlag="addOrEditFlag"
      @save="addSave"
      :editMsgItem="editMsgItem"
      @close="closeAdd"
    />
    <OperateDialog v-model:showDialog="delDialog" @save="delSave" />
    <!-- @save="showRecordSave" -->
  </div>
</template>
<script setup lang="ts">
import Pagination from "@/components/Pagination.vue";
import RouteHeadLine from "@/components/RouteHeadLine.vue";
import http from "@http";
import OperateDialog from "@/components/OperateDialog.vue";
import ElMessage from "@/components/ElMessage.js";
import SearchDetail from "./searchDetail";
import AddData from "./addData";
let params = reactive({ currentPage: 1, pagesize: 10 });
let handleSearch = () => {};
let addOrEditFlag = ref(true);
let total = ref(11);
let delDialog = ref(false);
let showEnterpriseDetail = ref(false);
let groupId = ref("");
let facilityListFlag = ref(true);
let showAddFlag = ref(false);
let pagiFacilityParams = ref({});
let urgencyLevel = ref([]);
let editMsgItem = ref({});
let facilityList = ref([]); //企业设施列表
let searchWrapStyle = ref("140px");
let showEditEnterpriseDetail = ref(false); //企业详情弹框
let showChangeFacilityDetail = ref(false); //更换弹框
let showDialog = ref(false);
let editIds = ref("");
let delIds = ref("");
let pagiFacilityTotal = ref(1);
let toggleRowSelection = (row) => {
  if (row.length == 0) {
    delIds.value = "";
    return;
  }
  delIds.value = row
    .map((item) => {
      return item.id;
    })
    .join(",");
};
let handerRecord = () => {
  //企业设施 记录
  showRecordFlag.value = true;
};
let delSave = () => {
  http({ url: "/admPCNoticeGroup/delete", data: { id: delIds.value } }).then(
    (res) => {
      if (res.code == 0) {
        delDialog.value = false;
        delIds.value = "";
        getList();
      }
    }
  );
};
let editChangeDetailMsg = () => {
  //企业设施 更换
  showChangeFacilityDetail.value = true;
};
// let showRecordSave = () => { //企业设施 记录
//   showChangeFacilityDetail.value = true;
// };
let facilityParams = reactive({}); // 企业设施查询参数
let form = reactive({});
/* 企业设施详情 */
let facilityDetail = () => {
  facilityListFlag.value = false;
};
//新增
let handlerAdd = () => {
  showAddFlag.value = true;
  addOrEditFlag.value = true;
};
//编辑
let editMsg = (row) => {
  editMsgItem.value = row;
  showAddFlag.value = true;
  addOrEditFlag.value = false;
};
/* 企业设施编辑 */
let changeDetail = () => {
  showChangeFacilityDetail.value = true;
};
let editEnterpriseDetailMsg = () => {
  showEditEnterpriseDetail.value = true;
  console.log(
    showEditEnterpriseDetail.value,
    "showEditEnterpriseDetail.value "
  );
};
let showStatus = ref(0);
let options = ref([
  { label: "佛挡杀", value: 2 },
  { label: "佛挡杀", value: 2 },
]);
let handleAudit = () => {
  showDialog.value = true;
};
let closeAdd = () => {
  editMsgItem.value = {};
};
//企业详情弹框确认按钮
let editEnterpriseDetailSave = () => {
  console.log("执行了");
};
let addSave = () => {
  editMsgItem.value = {};
  getList();
};
//企业设施更换  弹框确认按钮
let editChangeDetailSave = () => {};
watch(
  () => showStatus.value,
  () => {
    if (showStatus.value == 0) {
      searchWrapStyle.value = "140px";
    } else {
      searchWrapStyle.value = "70px";
    }
  },
  { deep: true }
);

let searchEnterprise = (id) => {
  showEnterpriseDetail.value = true;
  groupId.value = id;
};
let searchFacilityDetail = () => {
  showStatus.value = 2;
};
let handerBtn = () => {
  if (!facilityListFlag.value) {
    facilityListFlag.value = true;
    return;
  }
  showStatus.value = 0;
};
let openDeclaration = () => {};
let diaBack = () => {
  showDialog.value = false;
};
//查看二维码
let searchQrcode = () => {};
let diaSave = () => {};
let tableData = ref([]);
let handleDelete = () => {
  if (delIds.value == "") {
    ElMessage({ msg: "请选择要删除的组名称", type: "error" });
    return;
  }
  delDialog.value = true;
};
http({ url: "/listitem/getmodule", data: { module: "B08" } }).then((res) => {
  if (res.code == 0) {
    urgencyLevel.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});

// /admPCNoticeGroupDetail/delete
let getList = () => {
  http({ url: "/admPCNoticeGroup/datalist", data: { ...params } }).then(
    (res) => {
      if (res.code == 0) {
        tableData.value = res.data.list;
        total.value = res.data.total;
        ElMessage({ msg: "查询成功" });
      }
    }
  );
};
getList();
</script>
<style lang="scss" scoped>
.enterprise-control {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;
  .enterprise-facility {
    padding-left: 0;
    height: calc(100vh - 80px - 63px);
    background-color: #fff;
    padding-top: 25px;

    .table-wrap {
      margin-top: 0 !important;
      padding-left: 8px;
      padding-top: 0 !important;
      padding-right: 8px;
      .table-height {
        height: 53vh !important;
        overflow-y: scroll;
      }

      .btn-wrap {
        display: flex;
        justify-content: space-between;
        padding-left: 19px;

        padding-right: 17px;
        button {
          width: 89px;
          height: 37px;
          border-radius: 4px;
        }
        .change-btn {
          color: #0874fa;
          background-color: #cee3fe;
        }
        .record-btn {
          color: #fa8508;
          background-color: #fee7ce;
        }
        .stop {
          background-color: #fecece;
        }
      }
    }

    .enterprise-facility-title {
      :deep(.el-form-item__label) {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 22px;
        line-height: 40px;
        color: #333333;
      }
      :deep(.el-form) {
        margin-top: 20px;
        padding-left: 30px;
      }
      :deep(.el-input) {
        /* width: 300px !important; */
        height: 40px;
        background: #ffffff;
        border-radius: 4px;
        /* border: 1px solid #cccccc; */
      }

      :deep(.el-button) {
        width: 89px;
        height: 37px;

        border-radius: 4px;
        box-shadow: none;
      }
      :deep(.el-icon) {
        font-size: 15px !important;
      }
      :deep(.el-button--primary) {
        background-color: #0874fa !important;
        width: 89px;
      }
      :deep(.el-input__inner) {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
      }
      :deep(.el-input__inner::placeholder) {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #999999;
      }
      :deep(.el-button--danger) {
        width: 89px;
        background-color: #fa0808 !important;
      }
    }
    .title-name {
      display: flex;
      align-items: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 28px;
      color: #333333;

      .line {
        width: 5px;
        height: 36px;
        background: #0874fa;
        margin-right: 26px;
      }
    }
  }
  .enterprise-detail {
    height: calc(100vh - 80px - 63px);
    background-color: #fff;
    padding-top: 25px;
    display: flex;
    .edit {
      flex: 1;
      .close-btn {
        margin-left: 20px;
        width: 108px;
        height: 37px;
        background: #fa0808;
        border-radius: 4px;

        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
      }
      .btn-edit {
        padding-left: 5px;
        width: 108px;
        height: 37px;
        background: #0874fa;
        border-radius: 4px;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
      }
    }
    .main-wrap {
      flex: 1;
      .detail-wrap {
        margin-top: 30px;
        border: 1px solid #cccccc;
        margin-left: 30px;
        padding-left: 28px;
        padding-bottom: 50px;
        .line {
          margin-top: 33px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 500;
          font-size: 20px;
          color: #333333;

          .left {
            flex: 1;
            img {
              width: 209px;
              height: 225px;
              border: 1px solid #cccccc;
            }
          }
          .right {
            flex: 1;
            text-align: left;
            img {
              width: 155px;
              height: 156px;
              border: 1px solid #cccccc;
            }
          }
        }
      }
      .title-name {
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 28px;
        color: #333333;

        .line {
          width: 5px;
          height: 36px;
          background: #0874fa;
          margin-right: 26px;
        }
      }
    }
  }
  .back {
    margin-top: 10px;
    width: 94px;
    height: 43px;
    background: #9dafc1;
    border-radius: 4px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    img {
      width: 21px;
      height: 17px;
    }
  }
  .title-wrap {
    height: v-bind("searchWrapStyle");
    background: #ffffff;
    padding-top: 20px;

    /* width: 100%; */
    .search-wrap {
      margin-top: 30px;
      padding-left: 35px;
      padding-right: 43px;
    }
    .add {
      background-color: #009944;
      box-shadow: none;
      color: #fff;
      width: 89px;
      height: 37px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 20px;
    }
  }
  .content {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .table-btn-wrap {
    display: flex;
    justify-content: space-around;
    button {
      width: 89px;
      height: 37px;

      border-radius: 4px;

      border-radius: 4px;
    }
    .detail {
      font-weight: 400;
      font-size: 19px;
      color: #0874fa;
      background-color: #cee3fe;
    }
    .facility {
      font-weight: 400 !important;
      font-size: 19px !important;
      color: #fa8508 !important;
      background-color: #fee7ce !important;
    }
    .declaration {
      font-weight: 400;
      font-size: 19px;
      color: #0874fa;
      background: #cee3fe;
    }
  }
  .data-wrap {
    margin-top: 10px;
    width: 100%;
    height: calc(100vh - 80px - 10px - 140px);
    background: #fff;
    padding: 10px 8px 0 8px;
    .table-height {
      height: calc(100vh - 36vh);
      overflow-y: scroll;

      button {
        width: 115px;
        height: 39px;
        background: #e5efff;
        border-radius: 5px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #0874fa;
      }
      .table-edit {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 19px;
        color: #ec8000 !important;
        width: 89px;
        height: 37px;
        background: #ffefcc !important;
        border-radius: 4px;
      }
      .table-set {
        width: 115px;
        height: 38px;
        border-radius: 10px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #0874fa;
      }
    }
  }
}
</style>
